<template>
  <div>
    <div class="p1">
      <div class="mod wow wow animate__animated animate__fadeInUp">
        <div class="back77"></div>
        <div class="img777">7</div>
      </div>
      <div class="mod_title wow animate__animated animate__fadeInUp">全民K歌7.0 - 其实你很会唱歌</div>
    </div>
    <div class="p2">
      <h1 class="wow animate__animated animate__fadeInUp">界面更好看</h1>
      <h3 class="wow animate__animated animate__fadeInUp">简约实用</h3>
      <div class="p2_1">
        <ul>
          <li class="p2_1_hover wow animate__animated animate__fadeInDown">
            <img src="./image/tow1.png" alt="" srcset="" />
          </li>
          <li class="wow animate__animated animate__fadeInUp">
            <img src="./image/tow2.png" alt="" srcset="" />
          </li>
          <li class="p2_1_hover wow animate__animated animate__fadeInDown">
            <img src="./image/tow3.png" alt="" srcset="" />
          </li>
          <li class="wow animate__animated animate__fadeInUp">
            <img src="./image/tow4.png" alt="" srcset="" />
          </li>
          <li class="p2_1_hover wow animate__animated animate__fadeInDown">
            <img src="./image/tow5.png" alt="" srcset="" />
          </li>
        </ul>
      </div>
      <div class="p2_1">
        <ul>
          <li class="p2_1_hover wow animate__animated animate__fadeInDown">
            <img src="./image/tow6.png" alt="" srcset="" />
          </li>
          <li class="wow animate__animated animate__fadeInUp">
            <img src="./image/tow7.png" alt="" srcset="" />
          </li>
          <li class="p2_1_hover wow animate__animated animate__fadeInDown">
            <img src="./image/tow8.png" alt="" srcset="" />
          </li>
          <li class="wow animate__animated animate__fadeInUp">
            <img src="./image/tow9.png" alt="" srcset="" />
          </li>
          <li class="p2_1_hover wow animate__animated animate__fadeInDown">
            <img src="./image/tow10.png" alt="" srcset="" />
          </li>
        </ul>
      </div>
    </div>
    <div class="p3">
      <div class="box p3nr">
        <div class="p3_title wow animate__animated animate__fadeInUp">
          <h2>歌词更好看</h2>
          <h3>贴心懂你</h3>
        </div>
        <div class="p3_img wow animate__animated animate__fadeInRightBig">
          <div class="p3_n1"></div>
          <div class="p3_tit">
            <p>勇敢的向前走</p>
            <p>黎明的那道光</p>
            <p>会越过黑暗</p>
            <p>打破一切恐惧我能</p>
            <p>找到答案</p>
          </div>
          <div class="p3_n2">
            <ul class="p3_n2_ul">
              <li>
                标准
                <span class="n2_sp"></span>
              </li>
              <li>
                大
                <span class="n2_sp"></span>
              </li>
              <li>
                特大
                <span class="n2_sp"></span>
              </li>
            </ul>
            <div class="p3_bj">
              <span class="p3_bj_sp"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="p4">
      <h2 class="wow animate__animated animate__fadeInUp">视频更好看</h2>
      <h3 class="wow animate__animated animate__fadeInUp">随手可拍</h3>
      <div class="p4_1">
        <ul>
          <li class="wow animate__animated animate__fadeInRight">
            <img src="./image/mv1.jpg" alt="" srcset="" />
            <div class="p4_back"></div>
            <span class="p4_rgba"><span class="icon_paly"> </span></span>
          </li>
          <li class="wow animate__animated animate__fadeInRight">
            <img src="./image/mv2.jpg" alt="" srcset="" />
            <div class="p4_back"></div>
            <span class="p4_rgba"><span class="icon_paly"> </span></span>
          </li>
          <li class="wow animate__animated animate__fadeInRight">
            <img src="./image/mv3.jpg" alt="" srcset="" />
            <div class="p4_back"></div>
            <span class="p4_rgba"><span class="icon_paly"> </span></span>
          </li>
        </ul>
      </div>
    </div>
    <div class="p5_back">
      <div class="p5 box">
        <div class="p5_row wow animate__animated animate__fadeInUp">
          <h2>分享更 <br />好看</h2>
          <h3>以歌会友</h3>
        </div>
        <div class="p5_nav">
          <div class="p5_seve wow animate__animated animate__fadeInDown"></div>
          <div class="p5_nav_one wow animate__animated animate__fadeInUp">
            <div class="p5_nav_one_1">
              <img src="./image/share.png" alt="" srcset="" />
            </div>
            <ul class="p5_nav_one_2 ">
              <li>
                <div class="p5_animate huang"></div>
                <img src="./image/list_1.png" alt="" srcset="" />
              </li>
              <li>
                <div class="p5_animate zi"></div>
                <img src="./image/list_2.png" alt="" srcset="" />
              </li>
              <li>
                <img src="./image/list_3.png" alt="" srcset="" />
              </li>
              <li>
                <img src="./image/list_4.png" alt="" srcset="" />
              </li>
              <li>
                <img src="./image/list_5.png" alt="" srcset="" />
              </li>
            </ul>
            <div class="p5_boots">
              <div class="p5_im1">
                <img src="./image/lbt1.jpg" alt="" srcset="" />
              </div>
              <div class="p5_im2">
                <img src="./image/lbt2.jpg" alt="" srcset="" />
              </div>
              <div class="p5_t1">
                <img src="./image/t1.png" alt="" srcset="" />
              </div>
              <div class="p5_t2">
                <img src="./image/t2.png" alt="" srcset="" />
              </div>
            </div>
            <div class="p5_pinglun">
              <img src="./image/flower.png" alt="" srcset="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="p6">
      <h3 class="wow animate__animated animate__fadeInUp">更多精彩 等着你来</h3>
      <div class="p6_con">
        <ul class="p6_ul">
          <li class="wow animate__animated animate__fadeInRight">
            <h2>歌房群聊 轻松交友</h2>
            <img src="./image/room_pc.png" alt="" srcset="" />
            <div class="p6_ul_div"></div>
            <ul class="p6_ul_ul">
              <li>
                <img src="./image/icon_chat.png" alt="" srcset="" />
                <p>群聊</p>
              </li>
              <li>
                <img src="./image/icon_mic.png" alt="" srcset="" />
                <p>抢麦</p>
              </li>
              <li>
                <img src="./image/icon_home.png" alt="" srcset="" />
                <p>家族</p>
              </li>
            </ul>
          </li>
          <li class="wow animate__animated animate__fadeInRight">
            <h2>8亿用户的首选</h2>
            <div class="p6_padding">
              <img src="./image/first.png" alt="" srcset="" />
              <div class="p6_ul2 gundong1">
                <ul>
                  <li>
                    <img src="./image/pic1.jpg" alt="" />
                    大牙昕: 全民K歌软件让我从五音不全到学会唱歌只用了半年的时间
                  </li>
                  <li>
                    <img src="./image/pic2.jpg" alt="" />
                    Emily:
                    可以单独挑一两句重新录音，贼喜欢这功能，跑调都不怕啦嘿嘿
                  </li>
                  <li>
                    <img src="./image/pic3.jpg" alt="" />
                    Rosy:
                    可以合唱，又可以视频合唱，还有直播等娱乐互动平台，非常好的设计
                  </li>
                </ul>
                <ul>
                  <li>
                    <img src="./image/pic1.jpg" alt="" />
                    大牙昕: 全民K歌软件让我从五音不全到学会唱歌只用了半年的时间
                  </li>
                  <li>
                    <img src="./image/pic2.jpg" alt="" />

                    Emily:
                    可以单独挑一两句重新录音，贼喜欢这功能，跑调都不怕啦嘿嘿
                  </li>
                  <li>
                    <img src="./image/pic3.jpg" alt="" />
                    Rosy:
                    可以合唱，又可以视频合唱，还有直播等娱乐互动平台，非常好的设计
                  </li>
                </ul>
              </div>
              <div class="p6_ul2 gundong2">
                <ul>
                  <li>
                    <img src="./image/pic4.jpg" alt="" />
                    Beeeeee: 不得不赞一下逐句精修功能，帮助唱好每个音准
                  </li>
                  <li>
                    <img src="./image/pic5.jpg" alt="" />
                    Meat: 与天南地北的朋友唱同一首歌的感觉真好！
                  </li>
                  <li>
                    <img src="./image/pic6.jpg" alt="" />
                    周董:
                    最近音乐的伴奏质量大大提高，家族模式、互动评论送花都越来越吸引我多唱歌、唱好歌
                  </li>
                </ul>
                <ul>
                  <li>
                    <img src="./image/pic4.jpg" alt="" />
                    Beeeeee: 不得不赞一下逐句精修功能，帮助唱好每个音准
                  </li>
                  <li>
                    <img src="./image/pic5.jpg" alt="" />
                    Meat: 与天南地北的朋友唱同一首歌的感觉真好！
                  </li>
                  <li>
                    <img src="./image/pic6.jpg" alt="" />
                    周董:
                    最近音乐的伴奏质量大大提高，家族模式、互动评论送花都越来越吸引我多唱歌、唱好歌
                  </li>
                </ul>
              </div>
              <div class="p6_ul2 gundong3">
                <ul>
                  <li>
                    <img src="./image/pic7.jpg" alt="" />
                    舜舜: 不知道什么时候开始，全民已经是我每天必玩的应用了
                  </li>
                  <li>
                    <img src="./image/pic8.jpg" alt="" />
                    外星来的苹果:
                    一见钟情的软件，尤其喜爱歌房功能，与歌友们零距离交流
                  </li>
                  <li>
                    <img src="./image/pic9.jpg" alt="" />
                    Dan: 真的觉得自己找到了归属感，在这里我会忘记一切烦恼
                  </li>
                </ul>
                <ul>
                  <li>
                    <img src="./image/pic7.jpg" alt="" />
                    舜舜: 不知道什么时候开始，全民已经是我每天必玩的应用了
                  </li>
                  <li>
                    <img src="./image/pic8.jpg" alt="" />
                    外星来的苹果:
                    一见钟情的软件，尤其喜爱歌房功能，与歌友们零距离交流
                  </li>
                  <li>
                    <img src="./image/pic9.jpg" alt="" />
                    Dan: 真的觉得自己找到了归属感，在这里我会忘记一切烦恼
                  </li>
                </ul>
              </div>
              <div class="p6_ul2 gundong4">
                <ul>
                  <li>
                    <img src="./image/pic10.jpg" alt="" />
                    是静静啊:
                    《全民K歌》正如其名，是一个真正的老百姓唱歌的好平台
                  </li>
                  <li>
                    <img src="./image/pic11.jpg" alt="" />
                    Colin:
                    对于一个连《东方红》都不会哼哼的人来说，挑战京剧，被自己吓到了呢！
                  </li>
                  <li>
                    <img src="./image/pic12.jpg" alt="" />
                    咩咩:
                    喜欢在歌房唱歌，不仅可以开原唱以解尴尬，还可以将歌曲发表
                  </li>
                </ul>
                <ul>
                  <li>
                    <img src="./image/pic10.jpg" alt="" />
                    是静静啊:
                    《全民K歌》正如其名，是一个真正的老百姓唱歌的好平台
                  </li>
                  <li>
                    <img src="./image/pic11.jpg" alt="" />
                    Colin:
                    对于一个连《东方红》都不会哼哼的人来说，挑战京剧，被自己吓到了呢！
                  </li>
                  <li>
                    <img src="./image/pic12.jpg" alt="" />
                    咩咩:
                    喜欢在歌房唱歌，不仅可以开原唱以解尴尬，还可以将歌曲发表
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="wow animate__animated animate__fadeInRight">
            <h2>一键修音 秒变歌神</h2>
            <div class="p6_li3">
              <img src="./image/god_pc.png" alt="" srcset="" />
              <div class="p6_li3_1">6666</div>
              <div class="p6_li3_2">sss</div>
              <div class="p6_li3_3">智能修音</div>
              <div class="p6_li3_4"></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    new this.$wow.WOW().init();
  },
  methods: {},
};
</script>

<style scoped>
.p1 {
  padding: 30px 0;
  border-radius: 1px 1px 23px 23px;
  background-color: rgb(223, 21, 17);
}
.img777 {
  position: relative;
  width: 270px;
  height: 371px;
  background: url("./image/777.png") no-repeat;
  font-size: 0;
  line-height: 0;
}
.back77 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  overflow: hidden;
  background-color: rgba(207, 16, 13, 0.8);
}
.mod {
  position: relative;
  width: 270px;
  height: 371px;
  padding: 4px;
  margin: 0 auto 30px;
}
.mod_title {
  width: 279px;
  height: 85px;
  margin: 0 auto 10px;
  font-size: 0;
  line-height: 0;
  background: url("./image/qmkg.png") no-repeat;
}
.p2 {
  padding: 80px 0;
}
.p2 h1 {
  font-size: 90px;
  line-height: 1.1;
}
.p2 h3 {
  font-size: 42px;
  line-height: 1.1;
  font-weight: 400;
}
.p2_1 {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.p2_1 ul {
  display: flex;
}
.p2_1 ul li {
  width: 309px;
  margin: 0 30px;
}
.p2_1 ul li img {
  display: block;
  width: 309px;
  height: 656px;
}
.p2_1_hover {
  margin-top: 60px !important;
}
.p3 {
  background: url("./image/background.png") repeat;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.p3_title {
  width: 270px;
  height: 245px;
}
.p3_title h2 {
  font-size: 90px;
  line-height: 1.1;
  text-align: left;
}
.p3nr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.p3_title h3 {
  font-size: 42px;
  line-height: 1.1;
  color: #000;
  padding: 0;
}
.p3_img {
  position: relative;
  width: 530px;
  height: 940px;
  margin-right: 30px;
  border-radius: 24px;
  background-color: #000;
  box-shadow: 0 0 50px rgb(0 0 0 / 20%);
}
.p3_n1 {
  width: 515px;
  height: 332px;
  margin: 30px auto;
  background: url("./image/a1.png") no-repeat;
}

.p3_tit {
  transition: all 0.5s;
  margin: 60px auto 0;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  line-height: 1.7;
  font-size: 22px;
  animation: mymove 6s infinite;
}
@keyframes mymove {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.25);
  }
  38% {
    transform: scale(1.5);
  }
  62% {
    transform: scale(1.5);
  }
  75% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
.p3_tit p:first-child {
  font-size: 42px;
  color: #fc1717;
  font-weight: 700;
}
.p3_n2 {
  position: absolute;
  left: -30px;
  right: -30px;
  bottom: 0;
  height: 210px;
  padding: 0 40px;
  border-radius: 24px;
  background-color: #1a1a1a;
  overflow: hidden;
}
.p3_n2_ul {
  display: flex;
  margin-top: 50px;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.6);
  font-size: 32px;
  position: relative;
}
.p3_n2_ul::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 4px;
  height: 4px;
  border-radius: 99px;
  background-color: rgba(255, 255, 255, 0.2);
}
.n2_sp {
  display: block;
  width: 10px;
  height: 10px;
  margin: 20px auto 0;
  border-radius: 99px;
  background-color: #939393;
  font-size: 0;
  line-height: 0;
}
.p3_bj {
  position: absolute;
  left: 60px;
  right: 60px;
  bottom: 80px;
  animation: p3_bj 6s infinite;
}
@keyframes p3_bj {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(225px, 0, 0);
  }
  38% {
    transform: translate3d(450px, 0, 0);
  }
  62% {
    transform: translate3d(450px, 0, 0);
  }
  75% {
    transform: translate3d(225px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.p3_bj_sp {
  width: 28px;
  display: block;
  border-radius: 99px;
  height: 28px;
  margin: 0;
  background-color: #fc1717;
}
.p4 {
  padding-top: 80px;
  background: url("./image/background.png");
  overflow: hidden;
}
.p4 h2 {
  font-size: 90px;
  line-height: 1.1;
}
.p4 h3 {
  font-size: 42px;
  line-height: 1.1;
  font-weight: 400;
  padding-bottom: 240px;
}
.p4_1 {
  height: 800px;
  background: #1f1f1f url("./image/back_777.png") no-repeat 90% 100%;
}
.p4_1 ul {
  display: flex;
  justify-content: space-between;
}
.p4_1 ul li {
  position: relative;
  top: -180px;
  width: 448px;
  height: 796px;
  padding: 12px 12px 23px;
  overflow: hidden;
}
.p4_1 img {
  display: block;
  width: 448px;
  height: 796px;
  border-radius: 20px;
}
.p4_back {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url("./image/frame.png") no-repeat;
  pointer-events: none;
}
.p4_rgba {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50px;
}
.icon_paly {
  display: block;
  width: 76px;
  height: 76px;
  background: url("./image/icon_play.png") no-repeat;
  font-size: 0;
  line-height: 0;
  opacity: 0.7;
}
.p5_back {
  background-color: #f7f7f7;
  padding-top: 80px;
}
.p5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.p5_row h2 {
  font-size: 90px;
  line-height: 1.1;
  text-align: left;
}
.p5_row h3 {
  font-size: 42px;
  line-height: 1.1;
  font-weight: 400;
  color: #000;
}
.p5_nav {
  position: relative;
  width: 700px;
  height: 1260px;
}
.p5_seve {
  position: absolute;
  left: -200px;
  top: 0;
  width: 754px;
  height: 1038px;
  background: url("./image/back_771.png");
}
.p5_nav_one {
  position: absolute;
  right: -37px;
  top: 80px;
  width: 737px;
  height: 1180px;
}
.p5_nav_one_1 {
  width: 737px;
}
.p5_nav_one_1 img {
  display: block;
  width: 737px;
  height: 1180px;
}
.p5_nav_one_2 {
  position: absolute;
  left: 50px;
  top: 135px;
  display: flex;
  align-items: center;
}
.p5_nav_one_2 li {
  position: relative;
  margin: 0 10px;
}
.p5_animate {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  border: 1px solid;
  border-radius: 999px;
  animation: p5animate 1.5s infinite;
}
.huang {
  border-color: #febc32;
}
.zi {
  border-color: #9665fe;
}
@keyframes p5animate {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
.p5_boots {
  position: absolute;
  left: 160px;
  top: 447px;
  width: 470px;
  height: 470px;
  border-radius: 16px;
  overflow: hidden;
}
.p5_im1 img,
.p5_im2 img {
  display: block;
  width: 800px;
  height: 800px;
}
.p5_im1,
.p5_im2 {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -400px 0 0 -400px;
}
.p5_t1 img,
.p5_t2 img {
  display: block;
  width: 400px;
  height: 280px;
}
.p5_t1,
.p5_t2 {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -140px 0 0 -200px;
}
.p5_im1 {
  animation: p5_im1 6s ease-in-out 1.8s infinite;
}
.p5_im2 {
  animation: p5_im2 6s ease-in-out 1.8s infinite;
}
.p5_t1 {
  animation: p5_t1 6s ease-in-out 1.8s infinite;
}
.p5_t2 {
  animation: p5_t2 6s ease-in-out 1.8s infinite;
}
@keyframes p5_im1 {
  0%,
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
@keyframes p5_im2 {
  0%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
@keyframes p5_t1 {
  0%,
  100% {
    opacity: 0;
    -webkit-transform: translate3d(300%, 100%, 0);
    transform: translate3d(300%, 100%, 0);
  }
  25%,
  50% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  75% {
    opacity: 0;
    -webkit-transform: translate3d(-300%, -100%, 0);
    transform: translate3d(-300%, -100%, 0);
  }
}

@keyframes p5_t2 {
  0%,
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  25% {
    opacity: 0;
    -webkit-transform: translate3d(-300%, -100%, 0);
    transform: translate3d(-300%, -100%, 0);
  }
  50% {
    opacity: 0;
    -webkit-transform: translate3d(300%, 100%, 0);
    transform: translate3d(300%, 100%, 0);
  }

  75% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.p5_pinglun {
  transform: scale(1.2);
  transition: transform 0.6s ease-out 4.8s;
  position: absolute;
  left: 160px;
  bottom: 60px;
  width: 467px;
  height: 60px;
  background: url("./image/share_bar.png") no-repeat;
}
.p5_pinglun img {
  position: absolute;
  right: 26%;
  top: 12px;
  width: 36px;
  height: 36px;
}
.p6 {
  padding: 80px 0;
}
.p6 h3 {
  font-size: 90px;
  line-height: 1.1;
}
.p6_con {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 60px;
}
.p6_ul {
  display: flex;
  align-items: center;
}
.p6_ul > li {
  margin: 0 30px;
  position: relative;
}
.p6_ul > li:first-child {
  margin-left: 0;
}
.p6_ul h2 {
  margin-bottom: 40px;
  font-size: 42px;
  text-align: center;
}
.p6_ul_ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 214px;
  left: 50%;
  width: 440px;
  height: 180px;
  margin-left: -220px;
}

.p6_ul_ul li img {
  display: block;
  width: 71px;
  height: 71px;
}
.p6_ul_ul li p {
  text-align: center;
  padding-top: 10px;
  font-size: 18px;
}
.p6_ul_div {
  position: absolute;
  top: 214px;
  left: 50%;
  width: 520px;
  height: 180px;
  margin-left: -260px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 0 60px rgb(0 0 0 / 10%);
}
.p6_padding {
  position: relative;
  width: 472px;
  height: 409px;
  padding-top: 500px;
}
.p6_padding > img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 472px;
  height: 909px;
}
.p6_ul2 {
  position: relative;
  display: flex;
  margin: 20px 12px;
  width: 448px;
  overflow: hidden;
}
.p6_ul2 ul {
  display: flex;
}
.p6_ul2 ul li {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 51px;
  padding-right: 30px;
  margin: 0 68px;
  border-radius: 99px;
  background-color: #fc1717;
  color: #fff;
  font-size: 24px;
}
.gundong1 > ul {
  animation: p6_ul2li 25s linear 1.5s infinite;
}
.gundong2 > ul {
  animation: p6_ul2li 26s linear 1.5s infinite;
}
.gundong3 > ul {
  animation: p6_ul2li 25.5s linear 1.5s infinite;
}
.gundong4 > ul {
  animation: p6_ul2li 26.5s linear 1.5s infinite;
}
@keyframes p6_ul2li {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
.p6_ul2 ul li img {
  display: block;
  width: 41px;
  height: 41px;
  margin: 0 5px;
  border-radius: 99px;
}
.p6_li3 {
  position: relative;
}
.p6_li3_1 {
  position: absolute;
  right: 16px;
  top: 56px;
  width: 144px;
  height: 61px;
  background-repeat: no-repeat;
  font-size: 0;
  line-height: 0;
  background: url("./image/6666.png");
}
.p6_li3_2 {
  position: absolute;
  left: 50%;
  top: 180px;
  width: 346px;
  height: 288px;
  margin-left: -173px;
  background-repeat: no-repeat;
  font-size: 0;
  line-height: 0;
  background: url("./image/big_sss.png");
}
.p6_li3_3 {
  position: absolute;
  left: 50%;
  bottom: 300px;
  width: 362px;
  height: 89px;
  margin-left: -181px;
  background: url("./image/god_btn.png") no-repeat;
  font-size: 0;
  line-height: 0;
}
.p6_li3_4 {
  position: absolute;
  left: 50%;
  bottom: 220px;
  width: 346px;
  height: 23px;
  margin-left: -173px;
  background: url("./image/god_bar.png") no-repeat;
  font-size: 0;
  line-height: 0;
}
</style>
